Home »
JavaScript
encodeURIComponent() and decodeURIComponent() functions with examples in JavaScript
JavaScript encodeURIComponent() and decodeURIComponent() functions: Here, we are going to learn about encodeURIComponent() and decodeURIComponent() functions with examples, how and when they are used?
Submitted by IncludeHelp, on February 01, 2019
As we have discussed that escape(), unescape() and encodeURI(), decodeURI() are used to encode a decodes the data/URI, these functions do not encode some of the special characters like @+-/.*_.
But, the functions encodeURIComponent() and decodeURIComponent() can do it.
Functions encodeURIComponent() and decodeURIComponent() are used to encode and decode the URI along with @+-/.*_ characters. These functions encode, decode all special characters.
Example:
<html>
<head>
<title>JavaScipt Example</title>
</head>
<body>
<script>
var uri ="test page.aspx?val=Hello world!!";
//using encodeURI() and decodeURI() functions
var enc_str = encodeURI(uri);
var dec_str = decodeURI(uri);
//printing the values
document.write("<b>Using encodeURI() and decodeURI()...</b><br>");
document.write("Actual URI: " + uri);
document.write("<br>");
document.write("Encoded URI: " + enc_str);
document.write("<br>");
document.write("Decoded URI: " + dec_str);
document.write("<br><br>");
//using encodeURIComponent() and decodeURIComponent() functions
var enc_str = encodeURIComponent(uri);
var dec_str = decodeURIComponent(uri);
//printing the values
document.write("<b>Using encodeURIComponent() and decodeURIComponent()...</b><br>");
document.write("Actual URI: " + uri);
document.write("<br>");
document.write("Encoded URI: " + enc_str);
document.write("<br>");
document.write("Decoded URI: " + dec_str);
document.write("<br>");
</script>
</body>
</html>
Output
Using encodeURI() and decodeURI()...
Actual URI: test page.aspx?val=Hello world!!
Encoded URI: test%20page.aspx?val=Hello%20world!!
Decoded URI: test page.aspx?val=Hello world!!
Using encodeURIComponent() and decodeURIComponent()...
Actual URI: test page.aspx?val=Hello world!!
Encoded URI: test%20page.aspx%3Fval%3DHello%20world!!
Decoded URI: test page.aspx?val=Hello world!!
JavaScript Built-in Functions »